
<template>
	<create-view 
		:loading="loading" 
		:body-style="{ height: '100%'}">
		<flexbox 
			direction="column" 
			align="stretch" 
			class="crm-create-container">
			<flexbox 
				class="crm-create-header">
				<div 
					style="flex:1;font-size:17px;color:#333;">{{ title }}</div>
				<img 
					class="close" 
					src="@/assets/img/task_close.png" 
					@click="hidenView">
			</flexbox>
			<div class="crm-create-flex">
				<create-sections title="">
					<flexbox
						direction="column" 
						align="stretch">
						<div class="crm-create-body">
							<component
								ref="crmform" 
								:is="crmType | typeToComponentName" 
								:field-list="FieldList"
								:crm-rules="crmRules" 
								:formData="formData" 
								:crm-type="crmType" 
								:id = "action.id"
								:action="action.type"
								:relevant="action.relevant">
							</component>
						</div>
					</flexbox>
				</create-sections>
			</div>
			<!-- 保存 -->
			<div class="handle-bar">
				<el-button 
					class="handle-button"
					@click.native="hidenView">取消</el-button>
				<el-button 
					class="handle-button" 
					type="primary" 
					@click.native="saveField()">{{ sureBtnTitle }}
				</el-button>
			</div>
		</flexbox>
	</create-view>
</template>
<script type="text/javascript">
	import CreateView from '@/components/CreateView'
	import { XhUserCell } from '@/components/user'
	import CreateSections from '@/components/CreateSections'
	// 填写框组件
	import { 
		TableForm,
		SetmealTableForm,
		LawcaseTableForm,
		ContractTableForm
	} from '@/components/FromData'
	
	// API
	import { filedGetField } from '@/api/setting/setting'

	export default {
		name: 'CrmCreateView', // 所有新建效果的view
		components: {
			CreateView,
			XhUserCell,
			CreateSections,
			TableForm,
			SetmealTableForm,
			ContractTableForm,
			LawcaseTableForm
		},
		filters: {
			/** 根据type 找到组件 */
			typeToComponentName(form_type) {
				if(form_type == "customer") return 'SetmealTableForm'
				if(form_type == "lawcase") return 'LawcaseTableForm'
				if(form_type == "contract") return 'ContractTableForm'
				return 'TableForm'
			}
		},
		props: {
			// CRM类型
			crmType: {
				type: String,
				default: ''
			},
			actionType: {
				type: [String,Number],
				default: ''
			},
			/**
			 * save:添加、update:编辑(action_id)、read:详情、index:列表
			 * relative: 相关 添加(目前用于客户等相关添加)
			 */
			action: {
				type: Object,
				default: () => {
					return {
						type: 'save',
						id: ''
					}
				}
			},
			// 表单数据
			formData: {
				type: Object,
				default: () => {
					return {}
				}
			},
			relationInfo: {
				type: Object,
				default: () => {
					return {
						default_value: "",
						form_type: "customer",
						name: "客户",
						types: "crm_customer",
						value: []
					}
				}
			},
		},
		computed: {
			sureBtnTitle() {
				return '保存'
			}
		},
		data() {
			return {
				// 标题展示名称
				title: '',
				loading: false,
				// 自定义字段信息表单
				FieldList: [],
				// 自定义字段验证规则
				crmRules: {},
			}
		},
		watch: {
			crmType: function(value) {
				this.title = this.getTitle()
				this.crmRules = {}
				this.FieldList = []
				this.getField()
			}
		},
		mounted() {
			// 获取title展示名称
			document.body.appendChild(this.$el)
			this.title = this.getTitle()
			this.getField()
		},
		destroyed() {
			// remove DOM node after destroy
			if (this.$el && this.$el.parentNode) {
				this.$el.parentNode.removeChild(this.$el)
			}
		},
		methods: {
			// 根据类型获取标题展示名称
			getTitle() {
				return this.action.type == 'update' ? '编辑' : '新建'
			},

			// 关闭
			hidenView() {
				this.$emit('hiden-view')
			},

			// 获取自定义字段
			getField() {
				this.loading = true
				// 获取自定义字段的更新时间
				var params = {}
				params.types = 'crm_' + this.crmType
				params.module = 'crm'
				params.controller = this.crmType
				params.action = this.action.type
				params.actiontype = this.action.actiontype
				
				// 进行编辑操作
				if (this.action.type == 'update') {
					params.action_id = this.action.id
				}

				filedGetField(params)
					.then(res => {
						this.FieldList = res.data
						// 获取表单规则
						this.getFormRules(res.data)
						this.loading = false
					})
					.catch(() => {
						this.loading = false
					})
			},

			// 获取表单规则
			getFormRules(addFormList) {
				let totalArr = [];
				
				if((Object.prototype.toString.call(addFormList) === '[object Object]')){
					// 对象
					Object.keys(addFormList).forEach(key => {
						totalArr.push(...addFormList[key]);
					});
				}else{
					// 数组
					totalArr = addFormList
				}
				// console.log(totalArr);
				for (let i = 0; i < totalArr.length; i++) {
					let item = totalArr[i]
					
					this.crmRules[item.field] = [{
						required: item.is_null ? true : false,
						message: item.name + '不能为空',
						trigger: item.form_type == 'checkbox' || item.form_type == 'select' ? ['change'] : [
							'blur'],
					}]
				}
			},

			// 保存数据
			saveField() {
				// this.loading = true
				let checked = this.$refs['crmform'].validateForm()
				if (checked.flag) {
					// return console.log(checked.data);
					this.$emit('save-success',checked.data)
					this.loading = false
				} else {
					this.loading = false
				}
			}
			
		}
	}
</script>
<style lang="scss" scoped>
	.crm-create-container {
		position: relative;
		height: 100%;
	}

	.crm-create-flex {
		position: relative;
		overflow-x: hidden;
		overflow-y: auto;
		flex: 1;
	}

	.crm-create-header {
		height: 40px;
		margin-bottom: 30px;
		padding: 20px 10px 30px 10px;
		flex-shrink: 0;
		border-bottom: 1px solid #eee;

		.close {
			display: block;
			width: 40px;
			height: 40px;
			margin-right: -50px;
			padding: 10px;
			cursor: pointer;
		}
	}

	// .crm-create-body {
	// 	flex: 1;
	// 	overflow-x: hidden;
	// 	overflow-y: auto;
	// }

	/** 将其改变为flex布局 */
	.crm-create-box {
		display: flex;
		flex-wrap: wrap;
		padding: 0 10px;
	}

	.crm-create-item {
		flex: 0 0 50%;
		flex-shrink: 0;
		// overflow: hidden;
		padding-bottom: 10px;
	}

	// 占用一整行
	.crm-create-block-item {
		flex: 0 0 100%;
		flex-shrink: 0;
		padding-bottom: 10px;
	}

	// .el-form-item /deep/ .el-form-item__label {
	//   line-height: normal;
	//   font-size: 13px;
	//   color: #333333;
	//   position: relative;
	//   padding-left: 8px;
	//   padding-bottom: 0;
	// }

	.el-form /deep/ .el-form-item {
		margin-bottom: 0px;
	}

	.el-form /deep/ .el-form-item.is-required .el-form-item__label:before {
		content: '*';
		color: #f56c6c;
		margin-right: 4px;
		position: absolute;
		left: 0;
		top: 5px;
	}

	.handle-bar {
		position: relative;
		
		.handle-button {
			float: right;
			margin-top: 5px;
			margin-right: 20px;
		}
	}

	.el-button+.el-button {
		margin-left: 0;
	}

	// 审核信息 里的审核类型
	.examine-type {
		font-size: 12px;
		color: white;
		background-color: #fd715a;
		padding: 0 8px;
		margin-left: 5px;
		height: 16px;
		line-height: 16px;
		border-radius: 8px;
		transform: scale(0.8, 0.8);
	}

	/deep/ .el-form-item__content {
		width: auto;
	}

	/deep/ .el-form-item__label {
		text-align: right;
		vertical-align: middle;
		float: left;
		font-size: 14px;
		color: #606266;
		line-height: 40px;
		padding: 0 12px 0 0;
		box-sizing: border-box;
		width: 85px;
	}

	/deep/ .el-form-item__content {
		display: inline-block;
		line-height: 40px;
		width: 200px;
	}

	/deep/ .el-input__inner {
		height: 40px;
		line-height: 40px;
		outline: none;
		padding: 0 15px;
	}

	/deep/ .el-form--label-top .el-form-item__label {
		padding: 0 10px 0 0;
	}

	/deep/ .el-form-item {
		margin-bottom: 42px;
		position: relative;
	}
</style>
